<template>
	<view class="container">
		<view class="top-backgroup">
			<view class="face_box">
				<view class="face_info" v-if="!isUserLogin">
					<view>
						<image :src="user_avatar" ></image>
					</view>

					<view class="username">
						<view>游客</view>
						<view><text class="oauth_btn" @click="gopage('/pages/my/face')">点击登录</text></view>
					</view>
				</view>
				<view class="face_info" v-if="isUserLogin">
					<view>
						<image :src="userInfo.avatar" mode="widthFix" style="width: 120rpx;height: 120rpx;"></image>
					</view>

					<view class="username" v-if="has_login">
						<view>{{userInfo.nickname}}</view>
						<view>{{userInfo.mobile}}</view>
					</view>
					
					<view class="username" v-if="!has_login">
						<view>{{userInfo.nickname}}</view>
						<view><text class="oauth_btn" @click="gopage('/pages/my/face')">点击授权</text></view>
					</view>
				</view>
				<view class="tuiguan_box">
					
				</view>
			</view>
			<view style="height: 46rpx;"></view>

			<view class="tips_box">
				<view class="tips_left">
					<view class="line1">{{sysData.name}}</view>
					<view class="line2">{{sysData.xcx_desc}}</view>
				</view>
			</view>
		</view>


		<view class="middle_mav_box box_shadow">
			<view class="middle_mav_main">
				<view class="one_nav" @click="gopage('/pages/my/info')">
					<image src="/static/my/info.png" class="biao"></image>
					<view>个人信息</view>
				</view>

				<view class="one_nav" @click="gopage('/pages/my/order/index')">
					<image src="/static/my/jilu.png" class="biao"></image>
					<view>购买记录</view>
				</view>

			

				<view class="one_nav" @click="previewImage">
					<image src="/static/my/zixun.png" class="biao"></image>
					<view>联系客服</view>
				</view>

			</view>
			<view style="height: 24rpx;"></view>
		</view>

		<view class="list_box box_shadow">
			<view class="one_list"  @click="gopage('/pages/my/order/share')">
				<view class="left">
					<image class="biao" src="/static/my/share.png"></image><text v-if="group_id == 4">我的推广</text><text v-else>我的分享</text>
				</view>
				<view><image src="../../static/my/more.png" class="more"></image></view>
			</view>
			<view class="one_list"  @click="gopage('/pages/article/list')">
				<view class="left">
					<image class="biao" src="/static/my/jiaocheng.png"></image><text>常见问题</text>
				</view>
				<view><image src="../../static/my/more.png" class="more"></image></view>
			</view>

			<view class="one_list" @click="goArticlePage(1)">
				<view class="left">
					<image class="biao" src="/static/my/tiaokuan.png"></image><text>用户协议</text>
				</view>
				<view><image src="../../static/my/more.png" class="more"></image></view>
			</view>
			
			<view class="one_list" @click="goArticlePage(2)">
				<view class="left">
					<image class="biao" src="/static/my/tiaokuan.png"></image><text>隐私条款</text>
				</view>
				<view><image src="../../static/my/more.png" class="more"></image></view>
			</view>
			


		</view>


		
		
	
	</view>
</template>

<script>

	import support from '@/components/support/index.vue';

	import {getsysData } from '@/api/index.js'
	
	import {
		mapGetters,
		mapState
	} from 'vuex';
	import {
		get_user_info,
	    getWechatInfo,
		dochangepwd
	} from '@/api/my.js'
	import baseUrl from '@/utils/siteInfo.js';
	export default {
		components: {
			support
		},
		data() {
			return {
				qiye_erweima: baseUrl.imgroot + '/front/qiye_erweima.png',
				user_avatar: baseUrl.imgroot + '/front/face.png',
				img_host:baseUrl.imgroot,
				refreshPage: false,
				userInfo: {},
				isUserLogin: false,
				has_login:false,
				group_id:1,
				sysData:{},
				
				showPwd:false,
				isSaving:false,
			}
		},
		computed: {
			...mapGetters('phone', {
				topHeight: 'topHeight',
				phoneHieght: 'phoneHieght',
			}),
		},
		onLoad() {
			
		},
		onShow() {

			this.isUserLogin = this.$user.isLogin()
			console.log("登录状态"+this.isUserLogin)
			if (this.isUserLogin) {
				this.getUserInfo()
			} else {
				uni.showToast({
					title: this.$t('logintip'),
					icon: 'none'
				});
				var that = this
				setTimeout(function(){
					that.goLogin();
				},1500)
			}
			this.getSysFunc();
		},
		onHide() {
			this.refreshPage = false
		},
		methods: {
			getUserInfo() {
				get_user_info().then(res => {
					if (res.code == 0) {
						this.userInfo = res.data;
						if(res.data.nickname != '' && res.data.nickname != undefined && res.data.nickname!='游客'){
							this.has_login = true;
						}
						this.group_id = res.data.group_id;
					}else{
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						var that = this
						setTimeout(function(){
							that.goLogin();
						},1500)
					}
				}).catch(err => {})
			},
			goLogin() {
				uni.navigateTo({
					url: '/pages/my/login/index?type=password'
				})
			},
			gopage(url,type=1){
				if(url == 'zixun'){
					this.makeCall();
				}else{
					if(url == '/pages/my/order/share'){
						url = url + "?group_id="+this.group_id;
					}
					if(type == 1){
						uni.navigateTo({
							url:url
						})
					}else{
						uni.switchTab({
							url:url
						})
					}

				}

			},
			goQrcode(){
				this.$refs.popupQrcode.open('center')
			},
			gotoAuth(){
				//#ifdef MP-WEIXIN
				uni.navigateTo({
					url:'/pages/my/face'
				})
				// #endif
				//#ifdef H5
				uni.navigateTo({
					url: '/pages/my/login/index?type=password'
				})
				// #endif
			},
			getSysFunc(){
			  getsysData().then(res=>{
			    if (res.code == 0) {
			      this.sysData = res.data
			    }
			  })
			},
			makeCall(){
				uni.makePhoneCall({
					phoneNumber:this.sysData.kefu_phone
				})
			},
			showLanageFunc(){
				console.log(111);
				this.$refs.popup.open('center')
			},
			previewImage(e) {
				//我这里 URLS 置空的原因是 我不需要预览，只需要开启 图片的 :show-menu-by-longpress="true"  属性，就可以识别出长按操作；需要预览的多张图片的URL 可以直接放在 URLS 里即可用！
				//可以根据自己的业务 把 current 设置为 e.target.src 属性，动态的把当前路径写为 当前预览图片地址！
				//版权声明：本文为CSDN博主「Fashion_Barry」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
				//原文链接：https://blog.csdn.net/weixin_56650035/article/details/122147640
				console.log('e', e);
				var erweima = this.img_host+this.sysData.kefu_erweima;
				uni.previewImage({
					// 需要预览的图片链接列表
					urls: [erweima],
					// 为当前显示图片的链接/索引值 e.target.src
					current: erweima,
					// 图片指示器样式
					indicator:'default',
					// 是否可循环预览
					loop:false,
					// 长按图片显示操作菜单，如不填默认为保存相册
					// longPressActions:{
					// 	itemList:[this.l('发送给朋友'),this.l]
					// },
					success: res => {
						console.log('res', res);
					},
					fail: err => {
						onsole.log('err', err);
					}
				});
			},
			goArticlePage(id){
				uni.navigateTo({
					url:`/pages/article/detail?id=${id}`
				})
			},
			gotopage(url){
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped>
page{
	background-color: #f6f6f6;
}
.container {
	width: 750rpx;
	height: 100vh;
	color: #fff;
	padding: 0 38rpx;
}
.top-backgroup{
	height: 326rpx;
}
.face_box{
	display: flex;
	justify-content: space-between;
	margin-top: 70rpx;
	align-items: center;
}
.face_info{
	display: flex;
	width: 50%;
	height: 130rpx;
	align-items: center;
	justify-content: flex-start;
	font-size: 28rpx;
	color: #000;
	font-weight: 600;
}
.face_info image{
	width: 130rpx;
	height: 130rpx;
	border-radius: 16rpx;
	/* box-shadow: 0px 0px 40px 0px rgba(0, 0, 0, 0.15); */
}
.face_info .username{
	margin-left: 8rpx;
}
.oauth_btn{
	padding: 1rpx 16rpx;
	background-color: #f1c68e;
	border-radius: 16rpx;
	font-size: 20rpx;
	color: #fff;
}
.tips_box{
	background: #fff;
	width: 100%;
	height: 150rpx;
	border-radius: 15rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0rpx 4rpx 4rpx 2rpx rgba(0, 0, 0, 0.1);
}
.tips_box .tips_left{
	width: 72%;
	display: flex;
	flex-direction: column;
}
.tips_box .tips_left view{
	margin-left: 30rpx;
}
.tips_box .tips_left .line1{
	color: #000;
	font-weight: 700;
	font-size: 32rpx;
}
.tips_box .tips_left .line2{
	color: #888888;
	font-size: 26rpx;
	margin-top: 16rpx;
}
.tips_box .tips_right{
	width: 28%;
	display: flex;
	justify-content: flex-end;
}
.tips_box .tips_right .btn{
	margin-right: 30rpx;
	line-height: 64rpx;
	font-size: 28rpx;
	height: 64rpx;
	width: 154rpx;
	color: rgb(99, 71, 56);
	background-color: rgb(241, 198, 142);
	box-shadow: rgba(241, 198, 142, 0.53) 4rpx 4rpx 8rpx;
	border-radius: 34rpx;
	text-align: center;
	font-weight: 700;
}
.box_shadow{
	border-radius: 14rpx;
	box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
}
.middle_mav_box{
	margin-top: 40rpx;
	overflow: hidden;
	background-color: #fff;
}
.middle_mav_main{
	margin-top: 30rpx;
	display: flex;
	justify-content: space-around;
	align-items: center;
	font-size: 28rpx;
	color: #888888;
	height: 140rpx;
}
.middle_mav_main .one_nav{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.middle_mav_main .one_nav .biao{
	width: 60rpx;
	height: 60rpx;
	margin-bottom: 20rpx;
	margin-left: auto;
	margin-right: auto;
}
.list_box{
	margin-top: 40rpx;
	overflow: hidden;
	padding: 25rpx 32rpx;
	display: flex;
	flex-direction: column;
	background: #fff;
}
.list_box .one_list{
	display: flex;
	justify-content: space-between;
	height: 92rpx;
	line-height: 92rpx;
	align-items: center;
	font-size: 28rpx;
	color: #888888;
}
.list_box .one_list:nth-of-type(3){
	/* display:block; */
}
.list_box .one_list .left{
	display: flex;
	align-items: center;
}
.list_box .one_list .biao{
	width: 42rpx;
	height: 42rpx;
	margin-right: 18rpx;
}
.more{
	height: 28rpx;
	width: 28rpx;
}
.tuiguan_box{
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.tuiguan_box image{
	width: 48rpx;
	height: 46rpx;
}
.copyright{
	font-size: 28rpx;
	color: #000;
	margin-top: 60rpx;
	text-align: center;
}
.copyright text{
	color: #3D7EFF;
	margin-right: 6rpx;
}
button[plain]{
	border: 0;
}
.button {
	background: rgba(0, 0, 0, 0);
	height: 100rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0;
	font-size: 28rpx;
}
button::after {
	border: none;
}
</style>
